<template>
  <div style="width: 600px;float: left;margin-left:-200px ;">
    <!--上面轮播图开始-->
    <template>
      <el-carousel style="width: 870px;" :interval="1800" type="card" height="200px">
        <el-carousel-item>
          <h3 class="medium">
            <img src="../assets/images/01lulo.png" alt=""></h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img src="../assets/images/youxuan.jpg" alt=""></h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img src="../assets/images/04.jpg" alt=""></h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img src="../assets/images/07.jpg" alt=""></h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img src="../assets/images/08.png" alt=""></h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img src="../assets/images/09.jpg" alt=""></h3>
        </el-carousel-item>
      </el-carousel>
    </template>
    <!--上面轮播图结束-->

    <!--下面热门推荐开始-->
    <!--最新发布(新房)-->
    <div class="panel hots" style="width: 860px;">
      <h3>最新发布(新房)</h3>
      <ul>
        <li v-for="item in newTop" :key="item.houseid">
          <a href="javascript:;" @click="toInfo(item.houseid)">
            <img :src="item.imgurl" alt="">
            <p>{{item.housetitle}}</p>
          </a>
        </li>
      </ul>
    </div>

    <!--最新发布(二手房)-->
    <div class="panel new" style="width: 860px;">
      <h3>最新发布(二手房)</h3>

      <div class="entry" v-for="item in oldTop" :key="item.houseid">
        <div class="head">
          <!--房型 level1经济型2中档型3高档型4豪华型-->
          <span v-if="item.level==1" class="sort">经济型</span>
          <span v-if="item.level==2" class="sort">中档型</span>
          <span v-if="item.level==3" class="sort">高档型</span>
          <span v-if="item.level==4" class="sort">豪华型</span>
          <!--标题-->
          <a href="javascript:;" @click="toInfo(item.houseid)">{{item.housetitle}}</a>
          <span style="margin-left:170px;" class="extra">
            <span class="reading">浏览({{item.browse}})</span>
            <a href="javascript:;" class="like">
              <i class="fa fa-thumbs-up"></i>
              <span>收藏(167)</span>
            </a>
          </span>
        </div>
        <div class="main">
          <div class="infoDiv">
            <p class="info"><span>发布于&nbsp; {{item.publishtime}}</span></p>
            <p class="brief"><span>[{{item.address}}]&nbsp;{{item.addressinfo}}</span></p>
            <p class="brief">
              <!--几室几厅 0全 1三室 2四室 3五室 4五室以上 -->
              <span v-if="item.apartment==1">户型：三室</span>
              <span v-if="item.apartment==2">户型：四室</span>
              <span v-if="item.apartment==3">户型：五室</span>
              <span v-if="item.apartment==4">户型：五室以上</span>

              |<span>建筑面积：{{item.areas}}㎡</span></p>
            <p class="brief"><span>均价：<b class="price">{{item.houseprice}}</b></span>万元/㎡</p>
          </div>
          <div class="imgDiv">
            <!--主图-->
            <a href="javascript:;" class="thumbs" @click="toInfo(item.houseid)">
              <img :src="item.imgurl" alt="">
            </a>
          </div>
        </div>
      </div>
      <!--最新发布-->
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        newTop: '', //新房最新发布推荐
        oldTop: '' //二手房最新发布推荐
      }
    },
    created() {
      this.getTop(); //获取主页最新数据
    },
    methods: {
      //获取主页最新发布数据
      async getTop() {
        const {
          data: res
        } = await this.$axios.get('HouseController/findByField.action?num=1')
        console.log(res)
        if (!res) return this.$message.error('未查询到数据！')
        this.newTop = res.newTop; //新房最新发布推荐
        this.oldTop = res.oldTop; //二手房最新发布推荐
      },
      //去详情页
      toInfo(id) {
         window.sessionStorage.removeItem("active");
        //console.log(row);
        // 跳转到详情页并传指定id参数
        this.$router.push({
          path: '/houseInfo',
          query: {
            id: id
          }
        })
      }
    }
  }
</script>

<style scoped>
  .infoDiv {
    float: left;
    width: 40%;
    margin-left: 13px;
  }

  .imgDiv {
    float: right;
    width: 55%;
    height: 140px;
  }

  .imgDiv a img {
    display: inline-block;
    height: 100%
  }

  span {
    margin-left: 10px;
    font-size: 14px;
  }

  .price {
    color: #fd4d39;
    font-size: 28px;
  }
</style>
